<template>
  <div class="login_container" id="building">
    <el-card class="loginCard">
      <div class="admin-title">
        <span>管理员登录</span>
      </div>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules">
        <el-form-item label="" prop="username">
          <el-input v-model="ruleForm.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" placeholder="请输入密码" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleClick('ruleForm')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import axios from "axios";
  import { defineComponent, ref} from "vue";
  import { ElMessage } from 'element-plus'
  export default defineComponent({
    setup() {
      return {
        input: ref(""),
      };
    },
    data() {
      return {
        activeName: "first",
        ruleForm: {
          username: "",
          password: "",
        },
        rules: {
          username: [
            { required: true, message: "请输入用户名", trigger: "change" },
          ],
          password: [
            { required: true, message: "请输入密码", trigger: "change" },
          ],
        },
      };
    },
    methods: {
      handleClick(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios.post("admin_login/", this.ruleForm).then((response) => {
              if (response.data.code == 202) {
                ElMessage.error("密码错误！");
              } else if (response.data.code == 201) {
                ElMessage.error("管理员不存在！");
              } else if (response.data.code == 200) {
                ElMessage({
                  message: "登录成功！",
                  type: "success",
                });
                localStorage.setItem("admin", "true");
                this.$router.push("/admin")
              } else {
                ElMessage.error("啊哦，系统开了点小差");
              }
            });
          }
        });
      },
    },
  });
</script>

<style scoped>
#building {
  background: url("../assets/zxyB.png");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
}
.login_container {
  background-image: linear-gradient(-180deg, #1a1454 0%, #0e81a5 100%);
  /*background-image: url("../images/bg_login.png");*/
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}
.loginCard {
  width: 340px;
  height: 260px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.admin-title {
  text-align: center;
  font-family: "微软雅黑";
  margin-bottom: 10%;
}
.el-form-item {
  text-align: center;
}
</style>